<template>
	<div class="app-container">
		<div class="row3">
			<span class="left-label">关键字</span>
			<el-input v-model="queryData.problemTitle" style="width: 350px; margin-right: 20px" placeholder="请输入搜索关键字" />
			<el-button @click="search">搜索</el-button>
			<el-button @click="reset">重置</el-button>
			<el-button @click="linkToAdd()">添加</el-button>
		</div>
		<BaseTable  v-loading="loading" :columns="columns" :dataList="dataList">
			<template #action="{ row }">
				<el-button type="primary" size="small" plain @click="toDetail(row.problemId)">详情</el-button>
				<el-button
					v-if="userStore.$state.roles.includes('admin') && row.problemStatus == '1'"
					type="primary"
					size="small"
					plain
					@click="toEdit(row.problemId)"
					>处理</el-button
				>
			</template>
		</BaseTable>
		<pagination :total="total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize" @pagination="search" />
	</div>
</template>
<script setup>
import { reactive } from 'vue'
import BaseTable from '@/components/BaseTable'
import { listQuestion } from '@/api/question/question'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

const { proxy } = getCurrentInstance()
const { problem_status } = proxy.useDict('problem_status')
const router = useRouter()
const loading = ref(false)
const columns = ref([
	{ key: 1, label: `标题`, prop: 'problemTitle', type: 'text', visible: true },
	{ key: 3, width: '150', label: `添加时间`, prop: 'createTime', type: 'dateTimeSf', visible: true },
	{ key: 3, width: '150', label: `受理时间`, prop: 'dealTime', type: 'dateTimeSf', visible: true },
	{ key: 3, width: '100', label: `状态`, prop: 'problemStatus', type: 'select', data: problem_status, visible: true },
	{ key: 4, width: '180', label: `操作`, prop: 'action', type: 'custom', visible: true }
])
const total = ref(0)
const dataList = ref([])
const queryData = reactive({
	pageNum: 1,
	pageSize: 100,
	problemTitle: ''
})
const search = () => {
	loading.value = true
	listQuestion(queryData).then((res) => {
		dataList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}
search()
const address = ref()
const reset = () => {
	for (let item in queryData) {
		queryData[item] = ''
	}
	queryData.pageNum = 1
	queryData.pageSize = 1000
	address.value[0]()
	search()
}
const linkToAdd = () => {
	router.push({
		path: '/question/questionAdd'
	})
}
const toDetail = (id) => {
	router.push({
		path: '/question/questionDetail',
		query: { id: id }
	})
}
const toEdit = (id) => {
	router.push({
		path: '/question/questionEdit',
		query: { id: id }
	})
}
</script>
<style lang="scss" scoped>
.left-label {
	color: #33b6fe;
	height: 24px;
	line-height: 24px;
	position: relative;
	top: 1px;
	margin-right: 10px;
	display: inline-block;
	min-width: 80px;
}
:deep(.el-table__header) {
	background-color: #2f3f56;
}

.row3 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}
</style>
